// render.js

const vscode = acquireVsCodeApi();
document.addEventListener("DOMContentLoaded", () => {
    // 创建外层的大 div
    const outerDiv = document.createElement('div');
    outerDiv.className = 'outer-container'; // 你可以根据需要更改类名

    // 创建文档片段
    const fragment = document.createDocumentFragment();

    colors.forEach(color => {
        // 创建内层的 div，类名为 color-item
        const innerDiv = document.createElement('div');
        innerDiv.className = 'color-item';
        innerDiv.textContent = color.number;
        innerDiv.style.backgroundColor = color.hex;
        innerDiv.addEventListener('click', () => {
            vscode.postMessage(color);
        });
        // 将内层 div 添加到文档片段
        fragment.appendChild(innerDiv);
    });
    // 将文档片段添加到外层 div
    outerDiv.appendChild(fragment);

    // 将外层 div 添加到 body
    document.body.appendChild(outerDiv);
});